<template>
  <div >
    <!--查询-->
    <nf-find :moduleId="moduleId"/>
    <!--按钮-->
    <nf-button :moduleId="moduleId"/>
    {{moduleId}}-{{dataId}}
    <!--列表-->
    <nf-el-grid
      v-bind="girdMeta"
      :data-list="dataList"
      :selection="dataListState.choice"
    />
    <!--分页-->
    <nf-pager/>
  </div>
</template>

<script>
import { defineProps, reactive, watch } from 'vue'
// 加载json
import loadJson from '../controller/loadjson.js'

// 控制函数
import dataListManage from '../controller/data-list.js'

// 查询组件
import find from './find.vue'
// 按钮组件
import mybutton from './buttons.vue'
// 列表控件
// eslint-disable-next-line import/no-absolute-path
import elGridList from '/ctrl/nf-el-grid/nf-el-grid-list.vue'
// 分页组件
import pager from './pager.vue'

</script>

<script setup>
  const nfFind = find
  const nfButton = mybutton
  const nfElGrid = elGridList
  const nfPager = pager

  // 属性：模块ID
  const props = defineProps({
    moduleId: [Number, String],
    dataId: [Number, String]
  })
  // 列表用的 meta
  const girdMeta = reactive({reload:false})
  // 依据模块ID，加载meta
  loadJson(props.moduleId, 'grid', girdMeta).then(() => {
    // 设置外键的查询条件
    watch(() => props.dataId, () => {
      if (typeof props.dataId !== 'undefined') {
        dataListState.fixedQuery[girdMeta.foreignIdName] = [401, props.dataId]
        dataListState.reloadFirstPager()
        // console.log('ssss', dataListState.query)
      }
    }, {immediate: true})
  })

  // 列表的状态管理类
  const {
    dataList, // 数据列表
    regDataListState, // 注册列表状态
    setHotkey // 设置快捷键
  } = dataListManage(props.moduleId)

  // 注册列表状态
  const dataListState = regDataListState()
  // 设置快捷键
  setHotkey(dataListState)
</script>
